<template>
  <div class="data">
    <section class="bg-purple">
      <div class="content">
        <el-form :model="ruleForm"
                 :rules="rules"
                 ref="ruleForm"
                 label-width="100px"
                 class="yuyi-ruleForm clear">
          <el-form-item label="数据范围" prop="dataScopeValue">
            <!--<el-select v-model="ruleForm.dataScopeValue"
                       filterable
                       placeholder="请选择"
                       style="width: 90%">
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>-->
            <el-radio v-for="(item, index) in options"
                      :key='index'
                      style="display: block; margin-top: 12px;margin-bottom: 15px"
                      v-model="ruleForm.dataScopeValue"
                      @change="handleChange"
                      :label="item.dictValue">{{item.dictLabel}}</el-radio>
          </el-form-item>
        </el-form>
        <div class="custom" v-if="ruleForm.dataScopeValue === '3'">
          <el-card shadow="never">
            <div class="custom-title">
              <span>部门权限范围</span>
              <el-input
                size="small"
                class="search-input"
                placeholder="输入关键字进行过滤"
                @input="handleFilterText"
                v-model="filterText">
              </el-input>
            </div>
            <el-scrollbar>
              <el-tree style="height: calc(100vh - 450px);"
                       class="filter-tree"
                       :data="treeDataOrg"
                       :default-checked-keys="orgData.orgIds"
                       show-checkbox
                       check-on-click-node
                       node-key="id"
                       ref="orgTree"
                       default-expand-all
                       :props="treeProps"
                       :filter-node-method="filterNode"
              >
                    <span slot-scope="{ node, data }">
                      <i :class="data.source"/>
                      <span> {{ node.label }} </span>
                    </span>
              </el-tree>
            </el-scrollbar>
          </el-card>
        </div>
      </div>

      <div class="btn-box">
        <el-button type="primary"
                   @click="onSave"
                   size="small"
                   :loading="saveLoading"
                   icon="el-icon-circle-plus-outline">保存
        </el-button>
      </div>
    </section>
  </div>
</template>

<script>
import { getSysDicId } from '../../../../api/dictionary/dictionary'
import { getQzOrg } from '../../../../api/user/userSet'

export default {
  name: 'mechanismPermissions', // 机构权限范围
  props: {
    type: {
      type: String,
      default: 'user'
    },
    saveLoading: {
      type: Boolean,
      default: false
    },
    saveTreeLoading: {
      type: Boolean,
      default: false
    },
    orgData: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      ruleForm: {
        dataScopeValue: ''
      },
      rules: {
        dataScopeValue: [
          {
            required: true,
            message: '请选择',
            trigger: 'change'
          }
        ]
      },
      filterText: '',
      treeDataOrg: [],
      checkKeys: [], // 默认选中
      treeProps: {
        label: 'orgName',
        value: 'id',
        children: 'children'
      },
      options: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'id'
      }
    }
  },
  mounted () {
    this.getSelectList()
    this.ruleForm.dataScopeValue = this.orgData.dataScopeValue
  },
  watch: {
    orgData () {
      this.ruleForm.dataScopeValue = this.orgData.dataScopeValue
    }
  },
  methods: {
    getSelectList () {
      getSysDicId('data_scope_value').then(res => {
        this.options = res.data.data
      })
      getQzOrg().then(res => {
        this.treeDataOrg = res.data.data
      })
    },
    handleChange () {
      // 选择
      if (this.ruleForm.dataScopeValue === '3') {
        getQzOrg().then(res => {
          this.treeDataOrg = res.data.data
        })
      }
    },
    handleFilterText () {
      this.$refs.orgTree.filter(this.filterText)
    },
    filterNode (value, data) {
      if (!value) return true
      if (value.trim() === '') {
        return true
      }
      return data.fullName.indexOf(value) !== -1
    },
    nodeClick () {
      this.$refs.orgTree.setCurrentKey(null)
    },
    onSave () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const info = {
            dataScopeValue: this.ruleForm.dataScopeValue,
            dataType: '',
            id: '',
            idData: 0,
            orgIds: this.ruleForm.dataScopeValue === '3' ? this.$refs.orgTree.getCheckedKeys() : [],
            remark: ''
          }
          this.$emit('handleSubmitSave', info)
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .data {
    height: 100%;
    background: #e9e9e9;
    padding: 15px;

    .bg-purple {
      background: #fff;
      height: 100%;
      border-radius: 5px;

      .content {
        height: calc(100% - 60px);
        margin-bottom: 10px;
        padding-top: 10px;
        overflow-y: auto;
      }

      .btn-box {
        text-align: right;
        padding-right: 15px;
      }
    }

    .custom-title {
      .search-input {
        margin: 10px 0;
      }
    }
  }
</style>
